<template>
    <div>
        <div class="mb20">
            <van-dropdown-menu active-color='#4873c1'>
                <van-dropdown-item v-model="value1" :options="option1" />
                <van-dropdown-item v-model="value2" :options="option2" />
            </van-dropdown-menu>
        </div>
        <div class="whiteBg">
            <div class="flex wd100 thTitle flexBetween colorfff">
                <div class="w70 ">品牌名称</div>
                <!-- <div class="w30">月度排名</div> -->
                <div class="w30">金额(万元)</div>
            </div>
            <div class="borderSty">
                <div class="btm list">
                    <div class="flex flexBetween alignCenter wd100 contentList">
                        <div class="w70 fontbold">三宅一生</div>
                        <!-- <div class="w30 p30"><input type="number" placeholder="月度排名" /></div> -->
                        <div class="w30"><input type="number" placeholder="金额" /></div>
                    </div>
                    <!-- <div class="center">
                        <span class="arrowStyle arrowBgccc rotateDown"></span>
                    </div> -->
                    <div class="grayBgs annualLayout">
                        <div class="flex alignCenter mb20">
                            <div class="fontSize13 mr10 color999">全年排名</div>
                            <input type="number" placeholder="全年排名" />
                        </div>
                        <div class="flex alignCenter">
                            <div class="fontSize13 mr10 color999">全年业绩</div>
                            <input type="number" placeholder="全年业绩" />
                        </div>
                    </div>
                    <div class="center">
                        <span class="arrowStyle arrowBgccc rotateDown"></span>
                    </div>
                </div>
                <div class="flex flexBetween alignCenter wd100 btm contentList">
                    <div class="w70 fontbold">九九归一</div>
                    <!-- <div class="w30 p30"><input type="number" placeholder="月度排名" /></div> -->
                    <div class="w30"><input type="number" placeholder="金额" /></div>
                </div>
                <div class="flex alignCenter wd100 btm flexBetween contentList">
                    <div class="w70">LANCY</div>
                    <!-- <div class="w30 p30"><input type="number" placeholder="月度排名" /></div> -->
                    <div class="w30"><input type="number" placeholder="金额" /></div>
                </div>
            </div>
            
        </div>
        <div class="flex flexBetween operateLayout">
            <div class="sameBtn cancelBtn whiteBg">取消</div>
            <div class="sameBtn saveBtn colorfff">提交</div>
        </div>
        <div class="otherBtn fontSize13 color666">
            <div class="circleSty center flex flexColumn flexCenter alignCenter mb20">
                <img src="../../assets/image/remark.png" />
                <div>备注</div>
            </div>
            <div class="circleSty center flex flexColumn flexCenter alignCenter">
                <img src="../../assets/image/active.png" alt="">
                <div> 活动</div>
            </div>
        </div>
    </div>
</template>
<script>
import { Toast,ImagePreview,Dialog,Empty } from 'vant';
import {GetQueryStr} from '@/common/common'

export default{
    name:'marketRank',
    data(){
        return{
            value1: 0,
            value2: 'a',
            option1: [
                { text: '北京skp', value: 0 },
                { text: '海口万象城', value: 1 },
                { text: '活动商品', value: 2 },
            ],
            option2: [
                { text: '1月', value: 'a' },
                { text: '2月', value: 'b' },
                { text: '3月', value: 'c' },
            ],
            month:0,
        }
    },
    created(){
        let token=GetQueryStr('token')
        console.log('token---------',token)
        if(token&&token!==''){
            localStorage.setItem('token',token)
        }

        var date = new Date();
        this.month=date.getMonth(); 
        for(let i=0;i<this.month;i++){
            let month=i+1
            // this.columns.push(month)
        }
    }
}
</script>
<style lang="less" scoped>
.wrapper{
    padding: 0.3rem;
    // background-color: #eee;
    background-color: rgba(72, 115, 193, 0.1);
}
.thTitle{
    background-color: rgba(83,114,192,.6);
    padding: 0.2rem;
}
.btm{
    border-bottom: 1px #eee solid;
}
.w70{
    width: 68%;
}
.w30{
    width: 30%;
    text-align: center;
    
}
.mb40{
    margin-bottom: 0.8rem;
}
input{
    width: 2rem;
    border:0;
    border: 1px #eee solid;
}
.p30{
    // border: 1px #eee solid;
    padding: 0.3rem 0.1rem;
}
.borderSty{
    // border: 1px #ddd solid;
    padding: 0 0.2rem 0.3rem 0.2rem
}
.operateLayout{
    width: 74%;
    margin: 0 auto;
    position: fixed;
    bottom: 1rem;
    left: 50%;
    transform: translate(-50%,-50%);
    .sameBtn{
        border:1px #ddd solid;
        padding: 0.18rem 0.8rem;
        border-radius: 0.1rem;
    }
    .saveBtn{
        background-color: #4873c1;
    }
}
.grayBgs{
    background-color: #f9f9f9;
}
.annualLayout{
    padding: 0.3rem;
}
.otherBtn{
    position: fixed;
    right: 0.2rem;
    top: 40%;
    .circleSty{
        width: 1.2rem;
        height: 1.2rem;
        // line-height: 1rem;
        border-radius: 50%;
        // background-color: #fff;
        background-color: rgba(0,0,0,0.1);
    }
    img{
        // display: inline-block;
        width: 0.5rem;
        height: 0.5rem;
    }
}
.contentList{
    padding: 0.3rem 0;
}
</style>